<div class="container">
  <form class="form-signin" #form="ngForm" (ngSubmit)="signin()">
    <h2 class="form-signin-heading">Please sign in</h2>
    <label for="inputEmail" class="sr-only">Email address</label>
    <input 
      type="email" 
      name="email"
      id="inputEmail"
      email='true' 
      class="form-control" 
      placeholder="Email address" 
      required 
      [(ngModel)]="signinForm.email"
      #email="ngModel">
      <!-- <div [hidden]="email.valid || email.pristine"
        class="alert alert-danger">
        Email is required
      </div> -->
      <!-- 当email 是无效的并且email输入过的或者email是被碰过的 -->
      <div *ngIf="email.invalid && (email.dirty || email.touched)"
        class="alert alert-danger">

        <div *ngIf="email.errors.required">
          Email is required.
        </div>
        <div *ngIf="email.errors.email">
          Email is not a email.
        </div>

      </div>
      <!-- #email : 模板引用变量
        Angular 表单双向数据绑定会为绑定的元素提供一些特殊的类名
      -->
      <p>{{ email.className }}</p>
    <label for="inputPassword" class="sr-only">Password</label>
    <input 
    type="password"
    name="password" 
    id="inputPassword" 
    class="form-control"
    placeholder="Password" 
    required
    minlength="6"
    maxlength="18"
    [(ngModel)]="signinForm.password"
    #password="ngModel"
    >
    <!-- 当email 是无效的并且email输入过的或者email是被碰过的 -->
    <div *ngIf="password.invalid && (password.dirty || password.touched)"
    class="alert alert-danger">
    <div *ngIf="password.errors.minlength">
        Name must be at least 6 characters long.
      </div>
      <div *ngIf="password.errors.maxlength">
          Password most 18
        </div>

    <div *ngIf="password.errors.required">
      Email is required.
    </div>
  </div>
  
  <div *ngIf="err_message" class="alert alert-danger" >
    {{ err_message }}
  </div>
    <button class="btn btn-lg btn-primary btn-block" [disabled]="!form.form.valid" type="submit">Sign in</button>
  </form>
  <p class="info"><a routerLink="/signup">Have no an account? Signup here.</a></p>
</div>